<template>
  <div>
    <!-- 网格弹框 -->

    <el-dialog
      title="网格详情"
      :visible.sync="dialogVisible"
      width="85%"
      append-to-body
      ref="ruleForm"
      top="15vh" 
    >
      <el-table
        :data="tableData"
        border
        :span-method="objectSpanMethod"
        height="60vh"
        max-height="70vh"
      >
        <el-table-column
          prop="gridName"
          label="网格"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="groupName"
          label="组别"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="groupHouseCount"
          label="户数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="微网格"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="villageCadres"
          label="村干部"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="jointVillageCadres"
          label="联村干部"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="groupManage"
          label="小组长"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="manageUser"
          label="微网格长"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="houseNum"
          label="微网格户数"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
 
      tableData: [],
      dialogVisible: false,
    };
  },
  methods: {
    // 表格合并方法
    tableDatas(tableData) {
      this.tableData = tableData;
      let t1 = 0;
      let t2 = 0;
      let t3 = 0;
      let t4 = 0;
      let t5 = 0;
      let t6 = 0;
      let t7 = 0;
      this.arr1 = [];
      this.arr2 = [];
      this.arr3 = [];
      this.arr4 = [];
      this.arr5 = [];
      this.arr6 = [];
      this.arr7 = [];
      this.arr8 = [];
      this.arr9 = [];
      this.tableData.forEach((item, index) => {
        if (index == 0) {
          this.arr1.push(1);
          this.arr2.push(1);
          this.arr3.push(1);
          this.arr4.push(1);
          this.arr5.push(1);
          this.arr6.push(1);
          this.arr7.push(1);
          this.arr8.push(1);
          this.arr9.push(1);
        } else {
          // 第一列
          if (item.gridName == this.tableData[index - 1].gridName) {
            this.arr1[t1] = 1 + this.arr1[t1];
            this.arr1.push(0);
          } else {
            this.arr1.push(1);
            t1 = index;
          }
          // 第二列
          if (item.groupName == this.tableData[index - 1].groupName) {
            this.arr2[t2] += 1;
            this.arr2.push(0);
          } else {
            this.arr2.push(1);
            t2 = index;
          }
          // 第三列
          if (
            item.groupHouseCount == this.tableData[index - 1].groupHouseCount
          ) {
            this.arr3[t3] += 1;
            this.arr3.push(0);
          } else {
            this.arr3.push(1);
            t3 = index;
          }
          // 第四列不用

          // 第五列
          if (item.villageCadres == this.tableData[index - 1].villageCadres) {
            this.arr5[t5] += 1;
            this.arr5.push(0);
          } else {
            this.arr5.push(1);
            t5 = index;
          }
          // 第六列
          if (
            item.jointVillageCadres ==
            this.tableData[index - 1].jointVillageCadres
          ) {
            this.arr6[t6] += 1;
            this.arr6.push(0);
          } else {
            this.arr6.push(1);
            t6 = index;
          }
          // 第七列
          if (item.groupManage == this.tableData[index - 1].groupManage) {
            this.arr7[t7] += 1;
            this.arr7.push(0);
          } else {
            this.arr7.push(1);
            t7 = index;
          }
        }
      });
      this.dialogVisible = true;
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.arr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 1) {
        const _row = this.arr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 2) {
        const _row = this.arr3[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 4) {
        const _row = this.arr5[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 5) {
        const _row = this.arr6[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 6) {
        const _row = this.arr7[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};
</script>
<style lang="less" scoped>
// /deep/ .el-table{   
//     overflow-y: auto;
// }
/deep/ .el-dialog__wrapper {
  overflow: hidden;
}
</style>